<template>
  <Modal :mask-closable="false" v-model="visible" :title="title">
    <Form ref="form" v-if="visible" class="formList" :model="form" label-position="top" :rules="rules">


      <FormItem label="物料bom名称" required prop="materialBomId">
        <Select v-model="form.materialBomId" placeholder="请输入物料bom名称`">
          <Option v-for="(item,index) in materialList" :key="index.id" :value="item.id" :label="item.
materialBomName"></Option>
        </Select>

      </FormItem>
      <FormItem label="物料名称" required prop="materialId">
        <Select v-model="form.materialId" placeholder="请输入物料名称`">
          <Option v-for="(item,index) in productBom" :key="index.id" :value="item.id" :label="item.materialName
"></Option>
        </Select>
      </FormItem>

      <FormItem label="数量" required prop="count">
        <Input type="number" v-model="form.count" placeholder="请输入数量" class="inputBorder"></Input>
      </FormItem>

    </Form>
    <div slot="footer" v-if="visible">
      <Button type="default" @click="closeModal">取消</Button>
      <Button type="primary" @click="handleSubmit('form')">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "CreateOrUpdateModal",
  props: {
    visible: Boolean,
    form: Object,
    title: String,
    handleAddSubmit: Function,
    materialList: Array,
    productBom: Array
  },
  data() {
    return {
      rules: {
        materialBomId: [
          {required: true, message: '请输入物料bom名称', trigger: 'blur'}
        ],
        materialId: [
          {required: true, message: '请输入物料bom版本', trigger: 'blur'}
        ],
        number: [
          {required: true, message: '请输入数量', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    closeModal() {
      this.$emit("update:visible", false);
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAddSubmit(formName);
        }
      })

    },
  },
};
</script>

<style scoped>
.formList {
}
</style>
